<!--多条件搜索-->
<form nz-form [formGroup]="formModel">
  <div class="toolbar margin-bottom" [ngClass]="isMobile?'wrap-mobile':'wrap'">

    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">
      <nz-form-item>
        <nz-form-label [nzSpan]="8" nzFor="name">合作伙伴</nz-form-label>
        <nz-form-control [nzSpan]="16" nzErrorTip="请选择合作伙伴">
          <nz-select formControlName="agencyId" nzShowSearch nzAllowClear nzPlaceHolder="请选择合作伙伴"
                     (ngModelChange)="gainAgencyId($event)">
            <nz-option *ngFor="let item of agencyList" [nzLabel]="item.name" [nzValue]="item.id"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
    </div>

    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">
      <nz-form-item>
        <nz-form-label [nzSpan]="8" nzFor="name">运营商</nz-form-label>
        <nz-form-control [nzSpan]="16" nzErrorTip="请选择运营商">
          <nz-select formControlName="userId" nzShowSearch nzAllowClear nzPlaceHolder="请选择运营商">
            <nz-option *ngFor="let item of userList" nzLabel="{{item?.username}}   {{item?.name}}" nzValue="{{item.id}}"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
    </div>


    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">
      <nz-form-item>
        <nz-form-label [nzSpan]="8" nzFor="status">状态</nz-form-label>
        <nz-form-control [nzSpan]="16" nzErrorTip="请选择状态">
          <nz-select formControlName="state" nzShowSearch nzAllowClear nzPlaceHolder="请选择状态">
            <nz-option  nzLabel="不限" nzValue="-1"></nz-option>
            <nz-option  nzLabel="已处理" nzValue="1"></nz-option>
            <nz-option  nzLabel="未处理" nzValue="0"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
    </div>
    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">
      <nz-form-item>
        <nz-form-label [nzSpan]="8" nzFor="name">场地</nz-form-label>
        <nz-form-control [nzSpan]="16" nzErrorTip="请选择场地">
          <nz-select nzShowSearch nzAllowClear nzPlaceHolder="请选择场地" formControlName="merchantStoreId">
            <nz-option nzLabel="不限" nzValue="-1"></nz-option>
            <nz-option *ngFor="let item of merchantStoreList" [nzLabel]="item.storeName"
                       [nzValue]="item.id"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
    </div>
    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">
      <nz-form-item>
        <nz-form-label [nzSpan]="8" nzFor="name">设备类型</nz-form-label>
        <nz-form-control [nzSpan]="16" nzErrorTip="请选择设备类型">
          <nz-select nzShowSearch nzAllowClear nzPlaceHolder="请选择设备类型" formControlName="deviceTypeId">
            <nz-option *ngFor="let item of deviceTypeList" [nzLabel]="item.deviceTypeName"
                       [nzValue]="item.id"></nz-option>
          </nz-select>
          <!--          <nz-select formControlName="name" nzShowSearch nzAllowClear nzPlaceHolder="Select a person"-->
          <!--                     [(ngModel)]="selectedValue">-->
          <!--            <nz-option nzLabel="Jack" nzValue="jack"></nz-option>-->
          <!--            <nz-option nzLabel="Lucy" nzValue="lucy"></nz-option>-->
          <!--            <nz-option nzLabel="Tom" nzValue="tom"></nz-option>-->
          <!--          </nz-select>-->
        </nz-form-control>
      </nz-form-item>
    </div>
    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">
      <nz-form-item>
        <nz-form-label [nzSpan]="8" nzFor="name">设备号</nz-form-label>
        <nz-form-control [nzSpan]="16" nzErrorTip="请输入设备号">
          <input type="text" id="deviceNo" nz-input formControlName="deviceNo" placeholder="请输入设备号"/>
        </nz-form-control>
      </nz-form-item>
    </div>
    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">
      <nz-form-item>
        <nz-form-label [nzSpan]="8">开始时间</nz-form-label>
        <nz-form-control >
          <app-my-date-picker [dateTimeType]="startDateTimeType" id="startDate" [date]="startDateTime" (event)="outDateTime($event)"></app-my-date-picker>
        </nz-form-control>
      </nz-form-item>
    </div>

    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">
      <nz-form-item>
        <nz-form-label [nzSpan]="8">结束时间</nz-form-label>
        <nz-form-control [nzSpan]="16">
          <app-my-date-picker [dateTimeType]="endDateTimeType" id="endDate" [date]="endDateTime" (event)="outDateTime($event)"></app-my-date-picker>
        </nz-form-control>
      </nz-form-item>
    </div>
    <div class="item" nz-col nzXs="24" nzSm="12" nzMd="7" nzLg="7" nzXl="3" class="margin-bottom"
         [ngClass]="isMobile? '': 'padding-left'" (click)="submitForm()">
      <button *ngIf="!isMobile" nz-button nzType="primary" class="button_search"><i nz-icon nzType="search"
                                                                                    nzTheme="outline"></i>查询
      </button>
      <button *ngIf="isMobile" nz-button nzBlock nzType="primary" class="button_search"><i nz-icon nzType="search"
                                                                                           nzTheme="outline"></i>查询
      </button>
    </div>
  </div>
</form>

<nz-spin [nzSpinning]="isSpinning">
  <div [ngClass]="isMobile?'wrap-mobile':'wrap'">
    <div class="statis">
    <span class="item">
      已处理：<span class="text-red">{{stateEqualsOneCount?stateEqualsOneCount:0}}</span>
    </span>
      <span class="item">
      未处理： <span class="text-red">{{stateZeroOrNullCount?stateZeroOrNullCount:0}}</span>
    </span>

    </div>
    <nz-table #nzTable [nzData]="listOfData" nzTableLayout="fixed"
              [(nzPageIndex)]="pageHelper.currentPage" [nzFrontPagination]="false"
              (nzPageIndexChange)="nzPageIndexChange($event)"
              [(nzPageSize)]="pageHelper.pageSize" [nzTotal]="pageHelper.totalItems"
              [nzScroll]="{ x: 'auto' }" [nzPageSizeOptions]="pageHelper.pageSizeOptions" nzShowSizeChanger (nzPageSizeChange)="onPageSizeChange($event)">
      <thead>
      <tr>
<!--        <th [nzChecked]="checked" [nzIndeterminate]="indeterminate"-->
<!--            (nzCheckedChange)="onAllChecked($event)"></th>-->
        <th>故障时间</th>
        <th>运营商</th>
        <th>合作伙伴</th>
        <th>设备号</th>
        <th>场地</th>
        <th>故障码</th>
        <th>故障说明</th>
        <th>处理状态</th>
        <th>操作</th>
      </tr>
      </thead>
      <tbody>
      <ng-container *ngFor="let data of nzTable.data">
        <tr>
          <td nzEllipsis>{{data.createTime | date: 'yyyy-MM-dd HH:mm:ss'}}</td>
          <td nzEllipsis>
            <div>{{data.userName}}</div>
            <div>{{data.mobile}}</div>
          </td>
          <td nzEllipsis>
            <div>{{data.agencyAlias}}</div>
            <div>{{data.agencyNo}}</div>
          </td>
          <td nzEllipsis>{{data.deviceNo}}({{data.deviceTypeName}})</td>
          <td nzEllipsis>{{data.storeName}}</td>
          <td nzEllipsis>{{data.fault}}</td>
          <td nzEllipsis>{{data.name}}</td>
          <td nzEllipsis>
            <div *ngIf="!data.state" style="color: red">未处理</div>
            <div *ngIf="data.state" style="color: green">已处理</div>
          </td>
          <td nzEllipsis>
            <button nz-button nzType="primary" *ngIf="!data.state" (click)="showModal(data)">处理完成</button>
          </td>
        </tr>
      </ng-container>
      </tbody>
    </nz-table>
    <nz-modal
      [(nzVisible)]="isVisible"
      nzTitle="温馨提示"
      (nzOnCancel)="handleCancel()"
      (nzOnOk)="handleOk()"
      [nzOkLoading]="isOkLoading"
    >
      <p *nzModalContent>请确认该故障是否已处理？</p>
    </nz-modal>
  </div>
</nz-spin>
